/*
 * @Author: szx
 * @Date: 2023-03-28 13:44:42
 * @LastEditTime: 2023-03-28 13:44:46
 * @Description:
 * @FilePath: \learn\fullstackopen\part1\part1\src\components\Course.jsx
 */
const Header = (props) => <h1>{props.name}</h1>;

const Part = (props) => {
    console.log(props);
    return (
        <>
            <p>
                {props.part.name} {props.part.exercises}
            </p>
        </>
    );
};

const Content = ({ parts }) => (
    <>
        {parts.map((part) => (
            <Part part={part} />
        ))}
    </>
);

const Total = ({ parts }) => {
    const total = parts.reduce((a, b) => {
        return a + b.exercises;
    }, 0);
    return (
        <>
            <p>There are {total} exercises in total.</p>
        </>
    );
};
const Course = ({ course }) => {
    return (
        <>
            <Header name={course.name} />
            <Content parts={course.parts} />
            <Total parts={course.parts} />
        </>
    );
};

export default Course;
